<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    h1{
      color:red;
      color:rgb(255,0,0);
      color:rgb(0,255,0);
      color:rgb(0,0,255);
      color:#FFFFFF;
      color:#FFF;
      color:#000000;
      color:#000;
      color:rgba(255,0,0,1);
      color:rgba(255,0,0,0.8);
      color:rgba(255,0,0,0.7);
      color:rgba(255,0,0,0.5);
      color:rgba(255,0,0,0.3);
      color:rgba(255,0,0,0.1);
    }
    .d1{
      background-image: url(img/mr.png);
      width: 50px;
      height: 100px;
      /*先长后宽*/
      background-size: 50px 100px;
    }
    .d2{

        width: 500px;
        height: 300px;
        border: 5px solid red;
        background-image: url(img/mr.png);
        /*背景图不允许重复*/
        background-repeat: no-repeat;
        background-position: 0,0;
        background-position: -50px,0;
        background-position:  0,50px;
        background-position:  -50px,-50px;
        background-position: left top;
        background-position: center center;
    }
    .d3{
        width: 500px;
        height: 500px;
        background-image: linear-gradient(270deg,red,orange,yellow,green,aqua,blue,purple);
    }
  </style>
</head>
<body>
<h1>测试颜色</h1>
<div class="d1">111</div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>